@font-face {
	font-family: 'rubiklight';
	src: url('assets/fonts/rubik-light-webfont.woff2') format('woff2'),
         url('assets/fonts/rubik-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'rubikregular';
	src: url('assets/fonts/rubik-regular-webfont.woff2') format('woff2'),
         url('assets/fonts/rubik-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'poppinslight';
    src: url('assets/fonts/poppins-light-webfont.woff2') format('woff2'),
         url('assets/fonts/poppins-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'poppinsregular';
    src: url('assets/fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('assets/fonts/poppins-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

:root {
  /* Main colour palette */
  --accentcolour1: #FFD300; 
  --accentcolour2: #FFDD39; 
  --linkhover: #FFE464;
  --bollockspoo: #15100f; /* page background */
  --backdrop: #231f1e; /* main elements background */
  --headerbackdrop: #191919;
  --bumhole: #191919; /* box background */
  --textcolour: #ebebeb;

  /* Fonts */
  --mainfont: 'rubikregular', sans-serif;
  --headerfont: 'poppinsregular', sans-serif;
  --boxfont: 'rubikregular', sans-serif;
  --easyreader: 'rubiklight', sans-serif;
  --easyreaderweight: 300;
  
  /* Corner radii */
  --smallcorner: 4px;
  --bigcorner: 16px;
}

html {
height: 100vh;
background-color: var(--accentcolour1);

background-image: url("assets/hexa.png");
   
background-repeat: repeat;
background-attachment: fixed;
}   
 
body { 
  max-width: 56rem;
  font-size: 1.1rem; color: var(--textcolour);
  font-family: var(--mainfont);
  margin: auto;
  padding: 0.2em 0.4em;
  /* first one is top and bottom, second one is left and right*/
  background-color: var(--bollockspoo);  
}

h1, h2, h3, h4
{ padding: 2px;
  font-family: var(--headerfont); color: var(--accentcolour1);
  font-variant: bold;
}

h1.indent
{ margin-top: 1rem;
  margin-bottom: 0.8rem;
  margin-right: 20%;
  margin-left: 6%;
  text-indent: 0px;
  font-size: 2rem;
}

h1.masthead
{ width: auto;
  background-color: var(--headerbackdrop);
  color: var(--accentcolour1);
  margin-top: -0.2em;
  margin-bottom: 0.1em;
  margin-left: auto;
  margin-right: auto;
  padding: 0.4rem;
  border: double var(--accentcolour1);
  border-width: 0px 0px 4px 0px;  
  text-align: center;
}

h2, h3, h4
{ margin-bottom: 0rem;
  margin-right: auto;
  margin-left: auto;
}

h3, h4
{ margin-top: 2rem;
}

h2 { margin-top: 0.8rem; font-size: 2rem;   }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }

.lower-border-fade {
	border-bottom: 2px solid black; border-image: linear-gradient(to right, var(--accentcolour1), var(--bollockspoo) 80%); border-image-slice: 1; 
}

.lower-border-fadex {
	border-bottom: 2px solid black; border-image: radial-gradient(circle, var(--accentcolour1), var(--bollockspoo) 60%); border-image-slice: 1;
}

.lower-border-pad {
	margin-bottom: 1.8rem;
}

.upper-border-pad {
	margin-top: 1.8rem;
}

/* Link colours and effects */
a {
   text-decoration: underline;
}

a:link         { color: var(--accentcolour1); }
a:visited      { color: var(--accentcolour1); }
a:hover        { color: var(--linkhover); }
a:active       { color: var(--accentcolour1); }

a:link.mast    { color: var(--accentcolour1); }
a:visited.mast { color: var(--accentcolour1); }
a:hover.mast   { color: var(--linkhover); }
a:active.mast  { color: var(--accentcolour1); }

a:link.menu    { color: var(--accentcolour1); }
a:visited.menu { color: var(--accentcolour1); }
a:hover.menu   { color: var(--linkhover); }
a:active.menu  { color: var(--accentcolour1); }

a:link.ext    { color: var(--accentcolour1); }
a:visited.ext  { color: var(--accentcolour1); }
a:hover.ext    { color: var(--linkhover); }
a:active.ext   { color: var(--accentcolour1); }

a.ext::after {
  content: " [ext]";
  color: var(--accentcolour2);
}


/* Flexbox setup*/
.cuntbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
font-family: var(--boxfont);
}
.boxgrid { flex-direction: row; }
.boxstack { flex-direction: column; }
/* flexbox outer wrapper*/
.chrysalis {
padding: 0;
margin: 0;
}
/* flexbox items */
.caterpillar {
padding: 0.4rem;
margin: 0.2rem;
background-color: var(--bumhole);
font-size: 1.2rem;
}
.squarebox { height: 10rem; width: 10rem; }
.medbox { height: 10rem; width: 60%; }
.longbox { height: 10rem; width: 70%; }
.minimenu { font-size: 0.8rem; }

div.bordure
{
  border: solid var(--accentcolour1);
  border-width: 0px 0px 2px 0px; 
}

.maincontent {
width: auto;
overflow: auto;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.2em 1em;
background-color: var(--backdrop);
}

.worms { 
font-family: var(--easyreader);
font-size: 1.4rem;
}

.light{
font-weight: var(--easyreaderweight);
}

hr 
{ width: auto;
  margin-top: -6px;
  margin-bottom: 0.2rem;
  margin-left: auto;
  border: 0;
  height: 2px;
  padding: 0px;
  background: var(--accentcolour1); 
}

hr.fade
{ 
 background-image: linear-gradient(to right, var(--accentcolour1), var(--bollockspoo));
 }
 
hr.fadebloom
{ 
 background-image: radial-gradient(circle, var(--accentcolour1), var(--backdrop) 60%);
 }

.inthemiddle
{ text-align: center; }
img.inthemiddle {
display: block;
margin-left: auto;
margin-right: auto;
}

img.blorf {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

img.preview {
height: 160px;
width: 120px;
}

.padone
{ padding: 1.8rem; }

p {
margin-bottom: 1.8rem;
}

/* Round corners */
/* Top left, top right, bottom right, bottom left*/
.roundcorner
{ -webkit-border-radius: var(--smallcorner);
  -moz-border-radius: var(--smallcorner);
  border-radius: var(--smallcorner);
}
.northwest
{ -webkit-border-top-left-radius: var(--bigcorner);
  -moz-border-radius-topleft: var(--bigcorner);
  border-top-left-radius: var(--bigcorner);
}
.northeast
{ -webkit-border-top-right-radius: var(--bigcorner);
  -moz-border-radius-topright: var(--bigcorner);
  border-top-right-radius: var(--bigcorner);
}
.southeast
{ -webkit-border-bottom-right-radius: var(--bigcorner);
  -moz-border-radius-bottomright: var(--bigcorner);
  border-bottom-right-radius: var(--bigcorner);
}
.southwest
{ -webkit-border-bottom-left-radius: var(--bigcorner);
  -moz-border-radius-bottomleft: var(--bigcorner);
  border-bottom-left-radius: var(--bigcorner);
}

@keyframes yellowfade {
  from {
    background: var(--accentcolour2);
  }
  to {
    background: transparent;
  }
}

:target {
  animation: yellowfade 1.5s;
}